<template>
  <div style="height: 200px; width: 100%; position: relative">
    <van-nav-bar title="春雨医生" left-text="" left-arrow @click="onClickLeft" />
    <div class="bing">
      <div class="bingren">
        <p>
          病例所属人
          <span style="color: #898989; position: absolute; left: 100px; width: 200px">{{
            personItem.name
          }}</span>
          <span style="color: #898989; position: absolute; left: 139px; width: 200px"
            >({{ personItem.title }})</span
          >
        </p>
        <p class="p1">
          记录时间
          <span
            style="color: #898989; position: absolute; left: 100px; width: 200px; line-height: 30px"
          >
            {{ personItem.time }}</span
          >
        </p>
      </div>
      <div class="tab" style="position: absolute; margin-top: 115px; width: 100%">
        <van-tabs>
          <van-tab title="健康备忘">
            <div style="background-color: #ffff; height: 300px; width: 100%">
              <p style="color: #b0b0b0; font-size: 14px; margin-left: 31px; margin-top: 15px">
                健康相关信息随手拍（最多可以添加50张）
              </p>
              <label
                for="filess"
                style="
                  line-height: 3rem;
                  text-align: center;
                  left: 4rem;
                  position: absolute;
                  color: #e2e2e2;
                  height: 90px;
                  width: 95px;
                  background-color: white;
                  line-height: 90px;
                  margin-left: 80px;
                  border: 2px dashed #e2e2e2;
                  font-size: 25px;
                "
                >+</label
              >
              <input
                type="file"
                id="filess"
                @change="handleFileChange"
                style="display: none"
                ref="fileInput"
                accept="image/*"
              />
              <img
                :src="userInfo.avatar"
                alt=""
                style="width: 95px; height: 90px; margin-left: 31px"
              />
              <p style="margin-left: 31px">备注</p>
              <p style="margin-left: 31px">
                记录日常需备忘的治疗与护理方法，生活注意事项、药品药方等信息
              </p>
              <textarea
                name=""
                id=""
                cols="30"
                style="
                  width: 85%;
                  height: 180px;
                  border: none;
                  background: #f7f7f7;
                  margin-left: 31px;
                  color: #000;
                  line-height: 1px;
                "
              >
              </textarea>
            </div>
          </van-tab>
          <van-tab title="门诊记录">
            <div style="background-color: #ffff; height: 300px; width: 100%">
              <p style="color: #b0b0b0; font-size: 14px; margin-left: 31px; margin-top: 15px">
                上传照片，如检查单、CT、病例、患处、药品等,春雨保证您的隐私安全(最多可添加50张)
              </p>
              <label
                for="filess"
                style="
                  line-height: 3rem;
                  text-align: center;
                  left: 4rem;
                  position: absolute;
                  color: #e2e2e2;
                  height: 90px;
                  width: 95px;
                  background-color: white;
                  line-height: 90px;
                  margin-left: 80px;
                  border: 2px dashed #e2e2e2;
                  font-size: 25px;
                "
                >+</label
              >
              <input
                type="file"
                id="filess"
                @change="handleFileChange"
                style="display: none"
                ref="fileInput"
                accept="image/*"
              />
              <img
                :src="userInfo.avatar"
                alt=""
                style="width: 95px; height: 90px; margin-left: 31px"
              />
              <p style="margin-left: 31px">备注</p>
              <p style="margin-left: 31px">
                记录日常需备忘的治疗与护理方法，生活注意事项、药品药方等信息
              </p>
              <textarea
                name=""
                id=""
                cols="30"
                style="
                  width: 85%;
                  height: 180px;
                  border: none;
                  background: #f7f7f7;
                  margin-left: 31px;
                  color: #000;
                  line-height: 10px;
                  margin-top: 20px;
                  position: absolute;
                "
              >
              </textarea>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div style="position: relative">
        <button class="btn" @click="handleAdd">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter()
const phone = ref(localStorage.getItem('phone'))
const name = ref(localStorage.getItem('name'))
const relation = ref(localStorage.getItem('relation'))
console.log('name', name.value)
console.log('phone', phone.value)
console.log('relation', relation.value)
const onClickLeft = () => {
  router.push({ path: '/jiankang' })
}
const fileInput = ref()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
console.log(userInfo.value)
const handleFileChange = () => {
  const file = fileInput.value.files[0]
  console.log(file)
  if (file) {
    const reader = new FileReader()
    reader.onload = (e: any) => {
      console.log(e.target.result)
      console.log(userInfo.value)
      userInfo.value.avatar = e.target.result
      console.log(userInfo.value.avatar)
      localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
    }
    reader.readAsDataURL(file)
    console.log(file)
  }
}
const personItem = ref<any>(JSON.parse(route.query.item))
console.log(personItem.value)

const handleAdd = async () => {
  await axios.post('/addres/BingLiAdd', personItem.value).then((res) => {
    console.log(res)
  })
  showSuccessToast('病历新增成功');
  router.push({ path: '/jiankang' })
}
</script>

<style lang="scss" scoped>
.bing {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: #f7f7f7;

  .bingren {
    position: absolute;
    width: 98%;
    height: 100px;
    background-color: white;

    p {
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .p1 {
      position: absolute;
      left: 30px;
      top: 60px;
    }
  }
}

.btn {
  position: fixed;
  top: 680px;
  width: 95%;
  left: 2%;
  height: 50px;
  color: white;
  background-color: #39d167;
  border: none;
  outline: none;
}
:deep(.van-tabs__line) {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  background: #39d167;
  border-radius: var(--van-tabs-bottom-bar-height);
}
</style>
